<!DOCTYPE html>
<html>
<head>
    <title>账号绑定</title>
    <meta charset="utf-8">
    <head th:include="weixin/include :: weixinheader"></head>
</head>
<body ontouchstart>
    <!--头部-->
    <div class="header">
        <span style="background-image: url('images/header.jpg')"></span>
        <div class="waves">
            <div class="theWave waves1"></div>
            <div class="theWave waves2"></div>
        </div>
    </div>
    <div class="login_box">
        <div class="weui-cells">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <input id="role" name="role" class="weui-input" type="text" placeholder="请选择角色">
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <input class="weui-input" name="phone" id="phone"  value="13415000094" type="text" placeholder="请输入手机号码">
                </div>
            </div>
            <div class="weui-cell weui-cell_vcode">
                <div class="weui-cell__bd">
                    <input class="weui-input" type="tel" name="code" id="code" value="123456" placeholder="请输入验证码" style="border-right:1px solid #f5f5f5;">
                </div>
                <div class="weui-cell__ft">
                    <input type="button" class="weui-vcode-btn getCode" value="获取验证码">
                </div>
            </div>
            <div class="">
                <button class="register">立即绑定</button>
            </div>
        </div>
    </div>
<div th:include="weixin/include :: weixinfooter"></div>
<script>
    $("#role").select({
        title: "请选择您的角色",
        items: [
            {
                title: "家长",
                value: "1"
            },{
                title: "教师",
                value: "2"
            }
        ]
    });
    $(".register").click(function(){
    	var phone = $("#phone").val();
    	var code = $("#code").val();
    	if(!phone || !/^1[3,4,5,7,8]\d{9}$/.test(phone)){
        	$.toptip('请输入正确的手机号');
        }else if(!code || !/^\d{6}$/.test(code)) {
            $.toptip('请输入六位手机验证码');
        }else{
        	$.get("checkMessageCode",{phone:phone,code:code},function(data){
	        	if(data){
	        		var role = $("#role").attr("data-values");
	        		$.get("register",{phone:phone,role:role});
			        location.href= "index";
	        	}else{
	        		$.toptip('验证码错误');
	        	}
	        });
        }
    });
    $('.getCode').click(function(){
        var phone = $("#phone").val();
        if(!phone || !/^1[3,4,5,7,8]\d{9}$/.test(phone)){
        	$.toptip('请输入正确的手机号');
        }else{
	        $.get("getMessageCode",{phone:phone},function(data){
	        	if(data.code == "0"){
			        $(".get_code").attr("disabled", "");
			        time();
	        	}else{
	        		$.toptip('短信发送失败');
	        	}
	        });
        }
    });
    
   	var wait=60;
    function time() {
    	var count = $(".getCode");
        if (wait == 0) {
            count.removeAttr("disabled");
            count.val("获取验证码");
            wait = 60;
        } else {
            count.attr("disabled", true);
            count.val("重新发送(" + wait + ")");
            wait--;
            setTimeout(function() {
                time()
            },1000);
        }
    }
</script>
</body>
</html>
